import React from "react";
import { Table, Dropdown } from "antd";

// 定义组件的 props 类型
interface ListTableProps {
  columns: any[];
  loading: boolean;
  dataSource: any[];
  pagination: {
    current: number;
    pageSize: number;
    total: number;
    onChange: (page: number, pageSize: number) => void;
  };
  rowSelection?: any;
  extraButtonMenu: (record: any) => any[];
  onExtraButtonClick: (record: any) => void;
  onTableChange: (
    pagination: any,
    filters: any,
    sorter: any,
    extra: any
  ) => void;
  onRowClick?: (record: any) => void;
}

const ListTable: React.FC<ListTableProps> = (props) => {
  const {
    columns,
    loading,
    dataSource,
    pagination,
    rowSelection,
    extraButtonMenu,
    onExtraButtonClick,
    onTableChange,
    onRowClick,
  } = props;

  // 渲染操作按钮
  const renderExtraButton = (text: any, record: any) => {
    const items = extraButtonMenu(record);
    return (
      <Dropdown.Button
        size="small"
        menu={{ items }}
        onClick={() => onExtraButtonClick(record)}
      >
        查看
      </Dropdown.Button>
    );
  };

  const tableColumns = columns.map((column: any) => {
    if (column.key === "operate") {
      return {
        ...column,
        render: (text: any, record: any) => renderExtraButton(text, record),
      };
    }
    return column;
  });

  return (
    <Table
      size="middle"
      rowKey="id"
      columns={tableColumns}
      loading={loading}
      dataSource={dataSource}
      pagination={pagination}
      rowSelection={rowSelection}
      onChange={onTableChange}
      onRow={onRowClick ? (record) => ({
        onClick: () => onRowClick(record)
      }) : undefined}
    />
  );
};

export default ListTable;
